import { useEffect, useLayoutEffect, useState } from 'react';
import { Mask } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, Space, Toast } from 'antd-mobile'
import { useRecoilState } from 'recoil';
import { RoundDetailMaskState, RoundDetailState } from '../../../state';

interface Props {
  visible: boolean;
  onClose: (value?: number) => void;
}

const GameInfoMask: React.FC<Props> = ({ visible, onClose }) => {
  const [allowValidate, setAllowValidate] = useState(false);
  const [roundDetail = {},] = useRecoilState(RoundDetailState);
  const [, setRoundDetailMaskState] = useRecoilState(RoundDetailMaskState);
  const { orderNo, seed, resultCipher, seedCipher, seedPlusResult, gamePosition } = roundDetail;
  const [list, setlist] = useState([
    { label: 'Game lD', value: orderNo },
    { label: 'Original Seed', value: seed },
    { label: 'Encrypted Result', value: resultCipher },
    { label: 'Encrypted Seed', value: seedCipher },
    { label: 'Game Result', value: seedPlusResult },
  ]);

  useEffect(() => {
    setlist([
      { label: 'Game lD', value: orderNo },
      { label: 'Original Seed', value: seed },
      { label: 'Encrypted Result', value: resultCipher },
      { label: 'Encrypted Seed', value: seedCipher },
      { label: 'Game Result', value: seedPlusResult },
    ])
  }, [roundDetail])

  const copyFn = () => {
    Toast.show({
      content: 'the data has been copied, please pasted into text to view'
    })
  }
  const copyUrl = `GAME ID:${orderNo || ''}\nOriginal Seed:${seed || ''}\nResult Cipher:${resultCipher || ''}\nSeed Cipher:${seedCipher || ''}\nResult:${gamePosition || ''}`;
  return (
    <Mask
      opacity={0}
      visible={visible}
      onMaskClick={() => onClose()}
    >
      <div
        className={styles.GameInfoMask}

      >
        <div className={styles.titleBox}>
          <i className={styles.icon} onClick={() => { onClose() }}></i>
        </div>
        <div className={styles.inner}>
          {
            list.map(({ label, value }) => (
              <div className={styles.flexLine} key={label}>
                <div className={styles.label}>
                  {label}:
                </div>
                <div className={styles.value}>
                  {value}
                </div>
              </div>
            ))
          }
        </div>
        <div className={styles.flexBtn}>
          <CopyToClipboard text={copyUrl}
            onCopy={() => {
              Toast.show({
                content: 'the data has been copied, please pasted into text to view',
              })
            }}>
            <div className={styles.Btnleft}>
              Copy
            </div>
          </CopyToClipboard>

          <div className={clsx(styles.BtnRight, !!seedPlusResult && styles.allow)} onClick={() => {
            setRoundDetailMaskState(true);
          }}>
            Validate
          </div>

        </div>
      </div>
    </Mask>
  );
};

export default GameInfoMask;
